<div class="panel panel-default panel-intro">
    
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('xykeep/goods/order/detail')}"
                           width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="itemtpl">
        <% if(i == 0){ %>
            <div class="order-head">
                <div class="col-sm-4 flex obr">
                    <span>商品</span>
                    <span style="margin-left: auto;">单价(元) / 节数</span>
                </div>
                <div class="col-sm-2 text-center obr">实付金额(元)</div>
                <div class="col-sm-2 obr">买家/收货人</div>
                <div class="col-sm-1 text-center obr">配送方式</div>
                <div class="col-sm-1 text-center obr">交易状态</div>
                <div class="col-sm-2 text-center">操作</div>
            </div>
        <% } %>
    
        <div class="col-sm-12 mt-15">
            <div class="item-top">
                <span>订单号：<%=item.order_sn%></span>
                <span style="margin-left:100px;">下单时间：<%=Moment(item.createtime*1000).format("YYYY-MM-DD HH:mm:ss")%></span>
                <span style="margin-left:100px;">订单来源：<%=item.platform_text%> </span>
                <span style="margin-left:100px;">支付方式：<%=item.pay_type_text%> </span>
            </div>
            <div class="item-content">
                <div class="col-sm-4 vhc obr" style="padding: 0;">

                    <% for(var i = 0 ; i < item.item.length ; i ++){ %>
                        <% var goods = item.item[i]; %>
                        <div class="item-goods flex">
                            <div class="order_img ">
                                <a href="javascript:;"><img class="img-md img-center" src="<%=cdnurl(goods.goods_image)%>" alt="<%=item.goods_title%>"></a>
                            </div>
                            <div style="margin-left: 10px;">
                                <p><%=goods.goods_title%></p>
                                <p><%=goods.goods_sku_text%></p>
                            </div>
                            <div style="margin-left: auto;text-align: right;">
                                <div><%=goods.goods_price%></div>
                                <div><%=goods.buy_num%>件</div>
                            </div>
                        </div>
                    <% } %>
                   
                </div>
                <div class="col-sm-2 vhc obr flex">
                    <%=item.total_fee%>
                </div>

                <div class="col-sm-2 vhc obr flex">
                    <div class="col-sm-12" style="padding: 0;">
                        <%=item.user.nickname%>(ID:<%=item.user.id%>)<br/>
                        <%=item.consignee%> <%=item.phone%> <br/>
                        <%=item.city%> - <%=item.address%>
                    </div>
                </div>
                <div class="col-sm-1 vhc obr flex">
                    <%=item.delivery_type_text%>
                </div>
                <div class="col-sm-1 vhc obr flex">
                    <%=item.status_text%>
                </div>

                <div class="col-sm-2 vhc flex">
                    <a href="javascript:;" class="detail btn btn-xs btn-success" data-id="<%=item.id%>"><i class="fa fa-eye"></i> 详情</a> 
                    <% if(item.status == 1){ %>
                        <a href="javascript:;" style="margin-left: 10px;" class="delivery btn btn-xs btn-success" data-id="<%=item.id%>"><i class="fa fa-rocket"></i> 发货</a> 
                    <% }%>

                    <% if(item.status == 2){ %>
                        <a href="javascript:;" style="margin-left: 10px;" class="take-delivery btn btn-xs btn-success" data-id="<%=item.id%>"><i class="fa fa-truck"></i> 确认收货</a> 
                    <% }%>
                </div>
            </div>
        </div>
    </script>
    
    <style>
        .flex{display: flex;flex-wrap: wrap;}
        .mt-15{margin-top: 15px;}
        .item-goods{border-bottom:solid 1px #e6e6e6;padding: 15px;}
        .item-goods:last-child{border: none;}
        .ctr{text-align: right;line-height: 35px;font-weight: bold;}
        .vhc{padding: 15px;height: 100%;align-items: center;justify-content: center;}
        .order-head{background: #f7f7f7;padding: 0px 15px;width: 100%;font-weight: bold;margin-top: 5px;}
        .order-head div{padding: 15px;}
        .item-top{background: #f7f7f7;padding: 10px;width: 100%;border: 1px solid #e6e6e6;}
        .item-content{border: 1px solid #e6e6e6;border-top: none;}
        .obr{border-right: 1px solid #e6e6e6;}
        /*.fixed-table-toolbar{display: none;}*/
    </style>
</div>

